<template>
  <div>
    <div class="host" @dblclick="dblclickShow"></div>
    <zz-dialog
      :visible = visible
      :showCancel = false
      @confirm = confirm
      @close="close">
      <div v-bar style="height: 400px">
        <div>
          <div class="table" style="width: 500px">
            <table v-if="hackReset">
              <tr v-for="(value, key) in $site">
                <td style="width: 100px">{{key}}</td>
                <td style="width: 300px"><input style="width: 100%" @change="setServer(key, $event)" v-model="$site[key]"/></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="mt20">
        <button class="button-line" @click="resetData(SERVER_DEV)">开发环境</button>
        <button class="button-line" @click="resetData(SERVER_TEST)">碧桂园测试环境</button>
        <button class="button-line" @click="resetData(SERVER_PINMING_TEST)">本地测试环境</button>
        <button class="button-line" @click="resetData(SERVER_PRE)">预发布环境</button>
        <button class="button-line" @click="resetData(SERVER_PROD)">正式环境</button>
        <button class="button-line" @click="resetData(SERVER_PROD)">正式环境</button>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
  export default {
    name: 'zz-host',
    data () {
      return {
        hackReset: true,
        template: {},
        server: {},
        visible: false
      }
    },
    mounted () {
      this.server = JSON.parse(this.$getCookie('server'))
    },
    methods: {
      dblclickShow () {
        if (process.env.NODE_ENV === 'development' || process.env.NODE_TYPE === 'dev' || process.env.NODE_TYPE === 'pinmingTest') {
          this.visible = true
        }
      },
      close () {
        this.visible = false
      },
      resetData (server) {
        this.$site = server
        this.$setCookie('server', JSON.stringify(this.$site), {expires: 14, domain: this.$site.domain})
        this.server = this.$site
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
      },
      setServer (type, event) {
        this.server[type] = event.target.value
        this.$setCookie('server', JSON.stringify(this.server), {expires: 14, domain: this.$site.domain})
      },
      confirm () {
        location.reload()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .host{
    position: fixed;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 10000;
  }
</style>
